<template>
	<w-container class="kline-buy">
		<w-navbar bgColor="#232744" :titleStyle="{color:'#fff'}" left-icon="back-btn-white" title="购买">
			<text slot='right' class="font-size-12 font-color-white">切换行情</text>
		</w-navbar>
		<w-swiper class='mlr-16'></w-swiper>
		<view class="ptb-12 flex flex-js-sb flex-ai-center plr-16">
			<view class="flex flex-ai-center">
				<text class="font-color-white font-size-18 font-w-600">凤吹晚霞</text>
				<text class="font-size-12 font-color-minor ml-14">{{appConfig.appName}}</text>
			</view>
			<view class="flex flex-ai-center" :class="info.increase? 'up-color':'down-color'">
				<text class="font-size-12 mr-7">{{info.increase}}%</text>
				<text class="font-size-20">112.34CNY</text>
			</view>
		</view>
		<view class="plr-16">
			<view class="tabs flex gap-12">
				<view class="font-color-white tabs-item" v-for="item in tabs" :key="item.type" :class="{active:item.type==tabType}" @click='changeType(item)'>
					{{item.name}}
				</view>
			</view>
			<view class="">
				
			</view>
		</view>
	</w-container>
</template> 

<script>
	export default {
		data() {
			return {
				info:{
					increase:-0.53
				},
				tabType:1,
				tabs:[
					{
						name:"流通",
						type:1
					},
					{
						name:"相关公告",
						type:2
					},
					{
						name:"成交额",
						type:3
					}
				]
			};
		},
		methods:{
			changeType({type}){
				this.tabType=type;
			}
		}
	}
</script>

<style lang="scss">
.kline-buy{
	@extend .bg-color-dark;
	.up-color{
		@extend .font-color-success;
	}
	.down-color{
		@extend .font-color-warning;
	}
	
	
	.tabs{
		&-item{
			@extend .font-color-minor;
			line-height: 32rpx;
			&.active{
				background-image: url($IMG_URL+'/static/icon/line.png');
				background-size: 100% 12rpx;
				background-repeat: no-repeat;
				background-position: bottom; 
				@extend .font-color-white;
			}
		}
	}
}
</style>
